<template>
  <div  style="background-color: #eaedf1; overflow: hidden;">
    <el-card  style="margin: 20px 30px 100px 30px;">
    <!-- 搜索区 -->
      <el-row type="flex" justify-content="between">
        <el-col :span="20">
           <el-form :inline="true"  :model.sync="formData">
           <!-- 标签名称 -->
              <el-input clearable v-model="formData.tag_name" size="small" style="width:200px; margin-right: 20px;" placeholder="标签名称"></el-input>
            <!-- 归属学科 -->
              <el-select clearable style="width:200px; margin-right: 20px;" v-model="formData.subject_id" size="small" placeholder="归属学科" @change="changeHandler(formData.subject_id)">
              <el-option v-for="item in treeList"
               :key="item.id" 
               :label="item.name" 
               :value="item.id"
               ></el-option>
              </el-select>
            <!-- 归属目录 -->
              <el-select clearable style="width:200px; margin-right: 20px;" v-model="formData.directory_id" size="small" placeholder="归属目录">
              <el-option v-for="item in directoryList"
               :key="item.id" 
               :label="item.name" 
               :value="item.id"
               ></el-option>
              </el-select>
            <!-- 显示状态 -->
              <el-select  v-model="formData.is_show" size="small" placeholder="显示状态">
              <el-option v-for="item in options"
               :key="item.value" 
               :label="item.label" 
               :value="item.value"
               ></el-option>
              </el-select>
          </el-form>
        </el-col>
        <el-col :span="5">
          <el-button @click="initData" plain type="primary" size="small">搜索</el-button>
          <el-button @click="clear" size="small">重置</el-button>
        </el-col>
        <el-col :span="2">
          <el-button @click="addHandler"  icon="el-icon-plus" size="small" type="primary" plain>创建标签</el-button>
        </el-col>
      </el-row>
      <br>
      <!-- 表格区啦 -->
      <el-table border :data="list">
        <el-table-column align="center" width="80px" type="index" label="序号"></el-table-column>
        <el-table-column align="center" label="标签名称" prop="tag_name"></el-table-column>
        <el-table-column align="center" label="归属目录" prop="directory_name"></el-table-column>
        <el-table-column align="center" label="归属学科" prop="subject_name"></el-table-column>
        <el-table-column align="center" label="创建人" prop="username"></el-table-column>
        <el-table-column align="center" label="是否显示" prop="tag_name">
          <template slot-scope="scope">
            <el-switch
            @change="showChange(scope.row.id,scope.row.is_show)"
              :value="scope.row.is_show"
              active-color="#13ce66"
              active-text="是"
              inactive-text="否"
              :active-value="1"
              :inactive-value="2"
              >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button @click="editHandler(scope.row,2)" circle type="primary" size="small" icon="el-icon-edit"></el-button>
            <el-button @click="delHandler(scope.row.id)" circle type="danger" size="small" icon="el-icon-delete"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <br>
      <!-- 分页咯 -->
      <el-row type="flex" justify="end">
        <el-pagination
        right
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :current-page.sync="formData.page"
        :page-sizes="[10, 15, 20]"
        :page-size="formData.limit"
        layout=" total,sizes, prev, pager, next, jumper"
        :total="count"
        ></el-pagination>
        </el-row>
    </el-card>
    <addTag @updateList="initData" :directoryList="directoryList" :treeList="treeList" ref="addTag"/>
  </div>
</template>

<script>
import addTag from './components/add-tag.vue'
import { getTagListApi, changeShowApi, delTagApi } from '@/api/tag.js'
import {getDirectorytreeApi} from '@/api/directory'
export default {
  name:'Tag',
  components: {
    addTag
  },
data() {
  return {
    formData: {
      subject_id: '',//归属学科
      directory_id: '',//归属目录
      tag_name: '',//标签名称
      is_show: '',
      page: 1,
      limit:10
    },
    //显示/隐藏依赖数组
    options: [
        {
          value: 1,
          label:'显示'
        },
        {
          value: 2,
          label:'隐藏'
        }
      ],
      list:[], //表单数据数组
    treeList: [], //归属学科下拉数组
    directoryList:[], //归属目录下拉数组
    count: 0, //数据条数
    queryData: this.$route.query.queryData,
    queryData_id: this.$route.query.id
  };
  },
  created() {
    this.initData()
    // console.log(this.treeList);
  },
  watch: {
    queryData: {
      handler(newVal, oldVal) {
        //路由传过来的数据
        //   console.log(newVal.subject_id);
        // console.log(newVal.subject_id);
        //   console.log(this.treeList);
        if (this.queryData_id == 2) {
          this.$nextTick(async () => {
          //先给formData内的必要属性赋值
          this.formData.subject_id = newVal.subject_id
          this.formData.directory_id = newVal.id
          //调用接口获取归属科目数据 因为上方搜索区域回显有问题 所以采用重新获取数据的方法
          let data = await getDirectorytreeApi() 
          this.treeList = data
          //处理数据: 筛选出归属目录下拉select依赖数组
          this.treeList.forEach(item => {
            // console.log(item.id);
            if (newVal.subject_id == item.id) {
              this.directoryList = item.children
              // console.log('来咯来咯');
            }
          })
          
        })
        }
        
          
          // this.formData.subject_id = newVal.subject_id
          // this.formData.directory_id = newVal.id
          // this.initData()
      },
      immediate:true
    },
    // formData: {
    //   handler(newVal, oldVal) {
    //     this.treeList.forEach(item => {
    //       if (item.id === newVal.subject_id) {
    //         this.directoryList = item.children
    //       }
    //     })
    //   }
    // }
  },
  methods: {
    //显示隐藏切换
    async showChange(id, show) {
      // console.log(666);
      let gaga = show == 1 ? 2 : 1
      await changeShowApi({ id: id, is_show: gaga })
      this.$message.success('切换成功啦!(*^▽^*)')
      this.initData()
  },
    async editHandler(val, type) {
      //脱裤子放屁的一步  懒得删了
      if (type === 2) {
        // let data = await getTagInfoApi(val.id)
        // console.log(data);
        // let data = await getDirectorytreeApi()
        // this.$refs.addTag.treeList = data
        // console.log(data);
        // console.log(val.id)
        //赋值用以dialog回显
        this.$refs.addTag.formData = val
        // console.log();
        //遍历dialog内归属科目的数组
        this.$refs.addTag.treeList.forEach(item => {
          //找到当前选中的科目id 条件筛选出对应的children数组
          if (this.$refs.addTag.formData.subject_id == item.id) {
            //赋值给归属目录数组
             this.$refs.addTag.directoryList = item.children
          }
          // console.log(item.id);
        })
        //   this.$refs.addTag.treeList.forEach(item => {
        //   if (item.id === val.id) {
        //     this.$refs.addTag.directoryList = item.children
        //   }
        // })
        // console.log(val);
        this.$refs.addTag.dialogShow = true
      }

    },
    //删除数据
    async delHandler(id) {
      // console.log(666);
      await this.$confirm('确定删吗?啊???????????????????????')
      await delTagApi(id)
      //如果当前页面就一条数据 你还给删了 那就page--
        if (this.formData.page > 1 && this.list.length === 1) {
          this.formData.page--
        }
      this.$message.success('删除成功啦!(*^▽^*)')
      this.initData()
    },
    async initData() {
      try {
        // console.log(666);
        //获取基本表单数据
        let { list, total } = await getTagListApi(this.formData)
        this.list = list
        this.count = total
        //拿到select依赖数组
        let data = await getDirectorytreeApi() 
        this.treeList = data
        // console.log(data);
      } catch (error) {
        console.log(error);
      }
    },
    clear() {
      //取消按钮吧
      this.formData = {
        subject_id: '',//归属学科
        directory_id: '',//归属目录
        tag_name: '',//标签名称
        is_show: '',
        page: 1,
        limit:10
      }
      this.directoryList = []
      this.initData()
    },
    //分页咯
    handleSizeChange(val) {
            this.formData.limit = val
            this.initData()
    },
    // 分咯
    handleCurrentChange(val) {
            this.formData.page = val
            this.initData()
    },
    //归属学科 @change事件 获取value值
    changeHandler(val) {
      // console.log(val);
      // console.log(this.treeList);
      if (val === '') {
        this.directoryList = []
        this.formData.directory_id = ''
        // directoryChange()
        // this.initData()
        // this.initData()
      }
      this.formData.directory_id = ''
      this.treeList.forEach(item => {
        //通过value值来条件筛选出对应的目录依赖数组
        if (item.id === val) {
          this.directoryList = item.children
        }
      //   if (val === '') {
      //   this.ditectoryList = []
      // }
      })
    },
    directoryChange(val) {
      
    },
    //新增
    addHandler() {
      //二话不说 先重置表单
      this.$refs.addTag.formData = {
                directory_id: '',
                is_show: 1,
                sort: 1,
                subject_id: '',
                tag_name: ''
      }
      this.$refs.addTag.dialogShow = true
    }
}
}
</script>

<style lang="scss" scoped>

</style>
